<template>
  <div class="area-platform-analysis" :loading="loading">
    <div class="query-header">
      <a-form
        :model="queryParam"
        :label-col="{
          style: { width: '70px' },
        }"
        :wrapper-col="{
          style: { width: '150px' },
        }"
      >
        <div class="query-header-div">
          <div class="query-header-div-left">
            <a-form-item label="保险公司" style="margin-bottom: 0px">
              <j-dict-select-tag v-model:value="queryParam.company" dictCode="BXGS" placeholder="请选择保险公司" />
            </a-form-item>
            <a-form-item name="platform" label="地区平台" style="margin-bottom: 0px; margin-left: 5px">
              <PlatformTree v-model:model-value="queryParam.platformCode" :suportArea="true" />
            </a-form-item>
            <a-form-item label="出保状态" style="margin-bottom: 0px; margin-left: 5px">
              <j-dict-select-tag v-model:value="queryParam.policyState" dictCode="DZBDZT" placeholder="请选择出保状态" />
            </a-form-item>
          </div>

          <div class="date-group">
            <a @click="queryDay" class="date-btn">当日</a>
            <a @click="queryMouth" class="date-btn">本月</a>
            <a @click="queryYear" class="date-btn">本年度</a>
            <a-range-picker :style="{ width: '356px' }" v-model:value="queryParam.timeRange" />
          </div>
        </div>
      </a-form>
    </div>
    <AnalysisPie :data="data" width="45%" title="保费占比" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted } from 'vue';
  import { dateFormat } from '/@/utils/common/compUtils';
  import AnalysisPie from './AnalysisPie.vue';
  import { getDataStatisticsPremium } from '../indexInsurance.api';
  import dayjs from 'dayjs';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import PlatformTree from '/@/components/BusinessComponents/PlatformTree.vue';

  const props = defineProps({
    areaData: {
      type: Array,
      default: function () {
        return [];
      },
    },
  });
  const loading = ref(true);
  const queryParam = ref<any>({});
  const data = ref<any>([]);

  onMounted(() => {
    queryMouth();
  });
  function queryDay() {
    const payBegin = dayjs();
    const payEnd = dayjs();
    queryParam.value.timeRange = [payBegin, payEnd];
  }
  function queryMouth() {
    const payBegin = dayjs().startOf('month');
    const payEnd = dayjs().endOf('month');
    queryParam.value.timeRange = [payBegin, payEnd];
  }

  function queryYear() {
    const payBegin = dayjs().startOf('year');
    const payEnd = dayjs().endOf('year');
    queryParam.value.timeRange = [payBegin, payEnd];
  }

  watch(
    () => queryParam,
    () => {
      reload();
    },
    {
      immediate: true,
      deep: true,
    }
  );
  function reload() {
    const params: any = {};
    if (queryParam.value.company) {
      params.insuranceCompany = queryParam.value.company;
    }
    if (queryParam.value.timeRange) {
      const format = 'yyyy-MM-dd';
      const begin = dateFormat(queryParam.value.timeRange[0], format);
      const end = dateFormat(queryParam.value.timeRange[1], format);
      params.startDate = begin;
      params.endDate = end;
    } else {
      return;
    }
    if (queryParam.value.platformCode && queryParam.value.platformCode !== 'all') {
      // 判断platform是否在数组中
      const isArea = props.areaData.find((item: any) => item.userCode === queryParam.value.platformCode);
      if (isArea) {
        params.area = queryParam.value.platformCode;
      } else {
        params.platformCode = queryParam.value.platformCode;
      }
    }
    loading.value = true;
    getDataStatisticsPremium(params)
      .then((res) => {
        const list = res.map((item: any, index: number) => {
          item.rankname = index + 1;
          return item;
        });
        data.value = list;
      })
      .finally(() => {
        loading.value = false;
      });
  }
</script>
<style lang="less" scoped>
  .analysis-card-tabs {
    border: none !important;
  }
  .area-platform-analysis {
    margin: 10px;
    padding: 16px 16px 0px 16px;
    background: #fff;
  }
  .query-header {
    margin-bottom: 10px;
    .query-header-div {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .query-header-div-left {
      display: flex;
      align-items: center;
    }
    .date-group {
      display: flex;
      align-items: center;
      .date-btn {
        margin-right: 10px;
      }
    }
    .query-group-cust {
      width: calc(50% - 15px);
      min-width: 180px !important;
    }
    .query-group-split-cust {
      width: 30px;
      display: inline-block;
      text-align: center;
    }
  }
  .area-analysis {
    display: flex;
    justify-content: space-between;
  }
</style>
